<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    {{pageTitle}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container" :style="{'min-height': containerHeight + 'px'}">
            <div class="handle-box flex flex-center">
                <el-button type="primary" icon="el-icon-folder" @click="close()">关闭</el-button>
            </div>

            <div class="table-form-box">
                <h3 class="h3">销售合同</h3>
                <el-form :model="ruleForm" ref="ruleForm">
                    <table border="0" width="100%" cellpadding="0" cellspacing="1">
                        <colgroup>
                            <col width="15%"/>
                            <col width="35%"/>
                            <col width="15%"/>
                            <col width="35%"/>
                        </colgroup>
                        <tbody>
                            <tr class="tr-title">
                                <td colspan="8">基本信息</td>
                            </tr>
                            <tr>
                                <td align="right">合同编号:</td>
                                <td>{{ruleForm.clientContractNo}}</td>
                                <td align="right"><span class="color-ff2200">*</span>合同名称:</td>
                                <td>{{ruleForm.clientContractName}}</td>
                            </tr>
                            <tr>
                                <td align="right">签订日期:</td>
                                <td>{{ruleForm.signTime}}</td>
                                <td align="right">
                                    关联客户:
                                </td>
                                <td>{{ruleForm.linkClientName}}</td>
                            </tr>
                            <tr>
                               <td align="right"><span class="color-ff2200">*</span>责任人:</td>
                                <td>{{ruleForm.dutyUserName}}</td>
                                <td align="right"><span class="color-ff2200">*</span>合同金额:</td>
                                <td>{{ruleForm.clientContractMoney}}</td>
                               
                            </tr>
                            <tr>
                                <td align="right">备注:</td>
                                <td colspan="3">{{ruleForm.remark}}</td>
                            </tr>
         
                        </tbody>
                    </table>
                </el-form>
            </div>
            <!-- 上传附件 -->
            <upload-files :files="fileList" @fun="dealFiles" v-if="flag"></upload-files>
            <div style="margin-top:10px;border:1px solid">
                <div style="margin:10px;">
                    <vxe-toolbar>
                        <template v-slot:buttons>
                            收款计划
                        </template>
                    </vxe-toolbar>

                    <vxe-table
                        keep-source
                        stripe
                        border
                        show-footer
                        :footer-method="footerMethod"
                        resizable
                        ref="xTable"
                        :data="tableData"
                    >
                        <vxe-table-column type="seq" width="60"></vxe-table-column>
                        <vxe-table-column
                            field="itemName"
                            title="计划日期"
                            :edit-render="{name: 'input', attrs: {type: 'date'}}"
                        ></vxe-table-column>
                        <vxe-table-column
                            field="points"
                            title="金额"
                            :edit-render="{name: '$input', props: {type: 'number',min:0,max:999999999}}"
                        ></vxe-table-column>
                        <vxe-table-column
                            field="description"
                            title="备注"
                            :edit-render="{name: 'input', attrs: {type: 'text'}}"
                        ></vxe-table-column>
                        
                    </vxe-table>
                </div>
            </div>
            <div class="list-box">
                <h4>收款计划</h4>
                <el-table
                    :data="planListData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column type="index" label="序号" align="center" width="55"></el-table-column>
                    <el-table-column prop="moneyPlanNo" label="收款计划编号"></el-table-column>
                    <el-table-column prop="clientContractName" label="合同订单"></el-table-column>
                    <el-table-column prop="clientName" label="客户"></el-table-column>
                    <el-table-column label="收款金额" align="center">
                        <template slot-scope="scope">
                           {{scope.row.collectMoney}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="collectMoneyDate" label="收款日期"></el-table-column>
                </el-table>
            </div>
            <div class="list-box">
                <h4>发票信息</h4>
                <el-table
                    :data="billListData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column type="index" label="序号" align="center" width="55"></el-table-column>
                    <el-table-column prop="clientName" label="开票单"></el-table-column>
                    <el-table-column prop="dutyName" label="责任人"></el-table-column>
                    <el-table-column prop="billingOpenDate" label="开票日期"></el-table-column>
                    <el-table-column prop="billingTypeName" label="发票类型" align="center"></el-table-column>
                    <el-table-column label="开票金额">
                         <template slot-scope="scope">
                           {{scope.row.billingOpenMoney}}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import appMain from '../../../utils/app_main';
import bus from '../../../components/common/bus'
import XEUtils from 'xe-utils';
var checkMoney = (rule, value, callback) => {
    if(value !== '' && !/^(0|[1-9][0-9]*)$/.test(value)) {
        callback(new Error('请输入正确的金额'));
    } else{
        callback();
    }
}

export default {
    data() {
        return {
            pageTitle: '',
            containerHeight: '',
            ruleForm: {
                clientContractMoney: '', // 合同金额 format: int64
                clientContractName: '', // 合同名称	
                clientContractNo: '', // 合同编码	
                createTime: '', // 创建时间	format: date-time
                dutyUserId: '', // 责任人id	
                dutyUserName: '', // 责任人	
                expectedPlan: '', // 预期收款计划列表JSON	
                flowNo: '', // 合同流程编号	
                id: '', // 主键	
                linkClientId: '', // 关联的往来单位客户id	
                linkClientName: '', // 关联的往来单位客户名字	
                remark: '', // 备注	
                signTime: '', // 合同签订时间	
                status: '', // 流程状态	
                statusTypeId: '', // 表单类型ID	
                statusTypeName: '', // 单类型名称	
                total: '', // 合计	
                updateTime: '', // 修改时间	format: date-time
                uploadReturns: '', // 附件上传详情	
                uppercase: '', // 大写
            },
            fileList: [],
            isUpdate: false, //是否是更新
            flag: false,


            tableData: [],
            planListData: [],
            billListData: [],
        };
    },
    methods: {
         //初始化table
        resetTableData(data) {
            const length = this.tableData.length;
            if (length < 10) {
                for (let index = 10; index > length; index--) {
                    let record = {
                        description: '',
                        itemName: '',
                        points: ''
                    };
                    this.tableData.push(record);
                }
            }
            console.log('resetTableData', this.tableData);
        },
        
        // 根据id查找销售合同
        clientContractInfoFindById(id) {
            appMain
                .clientContractInfoFindById({}, id)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.ruleForm = res.data.data;
                        if (res.data.data.expectedPlan) {
                            this.tableData = JSON.parse(res.data.data.expectedPlan)
                        }
                        
                    } else {
                        this.$message.error('服务器繁忙，请稍后再试');
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //根据id查询附件
        uploadFileInfoFindById(id) {
            appMain
                .uploadFileInfoFindById({}, id)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.fileList = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                    this.flag = true;
                })
                .catch(err => {
                    console.log(err);
                });
        },
        // 上传文件返回
        dealFiles(data) {
            this.fileList = data.backData;
            this.ruleForm.uploadReturns = this.fileList;
        },
         /**
          * vxe-table  start
          * 
          */
        async insertEvent(row) {
            let record = {
                description: '',
                itemName: '',
                points: ''
            };
            let { row: newRow } = await this.$refs.xTable.insertAt(record, row);
            //await this.$refs.xTable.setActiveCell(newRow, 'sex');
            console.log('insertEvent', this.tableData);
        },
        //表脚
        footerMethod({ columns, data }) {
            return [
                columns.map((column, columnIndex) => {
                    if (columnIndex === 0) {
                        return '合计';
                    }
                    if (columnIndex === 2) {
                        //console.log('columns', data);
                        let coin = `${XEUtils.sum(data, 'points')}`;
                        this.ruleForm.total = coin;
                        return coin + ' 元';
                    }
                    return '-';
                })
            ];
        },
        /**
         * vxe-table end
         */ 
        // 查询还款计划
        findPlans(id) {
            this.loading = true;
            let params = {
                pageNo: 1,
                pageSize: 100,
                record: {
                    clientContractId: id
                }
            };
            appMain
                .collectMoneyPlanFindAllPageByDTO(params)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.loading = false;
                        this.planListData = res.data.data.list;
                    } else {
                        this.$message.error(res.data.message);
                        this.loading = false;
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //  查询发票信息
        findBills(id) {
            this.loading = true;
            let params = {
               pageNo: 1,
                pageSize: 100,
                record: {
                    clientContractId: id
                }
            };
            appMain
                .billingInfoFindAllPageByDTO(params)
                .then(res => {
                    if (res.data.code === 20000) {
                        //TODO 测试环境使用
                        this.timer = setTimeout(() => {
                            this.loading = false;
                        }, 1000);
                        this.billListData = res.data.data.list;
                    } else {
                        this.$message.error(res.data.message);
                        this.loading = false;
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        close () {
            bus.$emit('close_current_tags')
        }
    },

    mounted() {
        var div_height = window.screen.availHeight;
        var height = div_height - 100;
        this.containerHeight = height - 160;
        this.pageTitle = this.$router.currentRoute.meta.title;
        // this.dictItemForPerfection();
    },
    created() {
        //如果有id过来就是修改的
        if (this.$route.query.id) {
            let id = this.$route.query.id;
            //是更新操作
            this.isUpdate = true;
            //通过id查询对应离职信息
            this.clientContractInfoFindById(id);
            //通过id查询附件信息
            this.uploadFileInfoFindById(id);
            this.findPlans(id);
            this.findBills(id);
        } else {
            this.resetTableData();
            //新增操作
            this.isUpdate = false;
            this.flag = true;
        }
    }
};
</script>

<style  scoped>
.container {
    padding-bottom: 50px;
}
.handle-box {
    padding: 5px 50px;
    width: 100%;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    z-index: 1;
}

.table-form-box table {
    background-color: #666;
}
.table-form-box .h3 {
    font-size: 22px;
    text-align: center;
    font-weight: normal;
    padding: 20px 0;
}
.table-form-box table .tr-title td {
    font-size: 14px;
    line-height: 40px;
}
.table-form-box table td,
.table-form-box table th {
    background-color: #fff;
    padding: 4px;
    height: 36px;
    font-size: 12px;
}
.color-ff2200 {
    color: #ff2200;
}
.list-box{
    border: 1px solid #ddd;
    margin-top: 20px;
}
.list-box h4{
    font-size: 14px;
    line-height: 40px;
}
</style>